<template>
  <div>
    <!-- 头 -->
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tops">
      <div class="xiangyou" @click="returns">&lt;</div>
      <div>首页轮播管理</div>
    </div>
    <!-- 具体添加的位置 -->
    <div class="column">
      <div class="column_tops">
        <!-- 添加轮播图 -->
        <div class="Pushs" @click="dialogFormVisible = true">添加轮播图</div>
        <el-dialog title="添加轮播图" :visible.sync="dialogFormVisible">
          <div class="solid"></div>
          <!-- 排序 -->
          <div class="items">
            <el-form :model="form">
              <el-form-item label="排序" :label-width="formLabelWidth">
                <el-select v-model="form.sort" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <!-- 上传图片 -->
          <div class="items">
            <el-form :model="form">
              <el-form-item label="上传图片" :label-width="formLabelWidth">
                <el-upload class="upload-demo" action="http://127.0.0.1:7001/api/loadUp" :on-success="handleAvatarSuccess">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
          <!-- 轮播名称 -->
          <div class="items">
            <el-form :model="form">
              <el-form-item label="轮播名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" placeholder="请输入分类名称"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 链接 -->
          <div class="items">
            <el-form :model="form">
              <el-form-item label="链接" :label-width="formLabelWidth">
                <el-input v-model="form.link" autocomplete="off" placeholder="请输入链接地址"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 链接 -->
          <div class="items">
            <el-form :model="form">
              <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio v-model="radio" label="1">显示</el-radio>
                <el-radio v-model="radio" label="2">隐藏</el-radio>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="tians">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="bottom_list">
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#F6F6F6', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
          <el-table-column fixed prop="order" label="顺序" width="180"> </el-table-column>
          <el-table-column prop="title" label="标题" width="180"> </el-table-column>
          <el-table-column prop="link" label="链接" width="180"> </el-table-column>
          <el-table-column prop="states" label="状态" width="180"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="220">
            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button> -->
              <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getCarousel, remolCarousel, addMing } from '../../api/index'
export default {
  data() {
    return {
      id: '',
      dialogFormVisible: false,
      form: {
        name: '',
        sort: '',
        link: '',
      },
      formLabelWidth: '120px',
      //选择
      options: [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '3', label: '3' },
      ],
      //上传图片
      fileList: [],
      //单选
      radio: '1',
      //表格内容
      tableData: [],
    }
  },
  created() {
    this.updates()
  },
  methods: {
    //添加轮播图图片
    tians() {
      if (this.form.name != '' &&this.form.sort != ''&& this.form.link != '') {
        addMing({
          link: this.form.link,
          order: this.form.sort,
          title: this.form.name,
          states: this.radio,
        }).then(() => {
          this.form.name = '',
          this.form.sort = '',
          this.form.link = '',
          this.dialogFormVisible = false,
          this.updates()
        })
      }
    },
    //底部表格
    handleClick(row) {
      // console.log(row)
    },
    //删除上指定信息
    del(row) {
      remolCarousel({ id: row.id }).then(() => {
        this.updates()
      })
    },
    updates() {
      //请求表格信息
      getCarousel().then((res) => {
        this.tableData = res.data
        this.tableData = this.tableData.map((item) => {
          if (item.states == 1) {
            item.states = '显示'
          } else if (item.states == 2) {
            item.states = '隐藏'
          }
          return { ...item }
        })
        // console.log(this.tableData)
      })
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      this.fileList.push('http://127.0.0.1:7001' + res.data)
      // console.log(this.fileList)
      // console.log(res, file)
    },

    //路由跳转
    returns() {
      this.$router.push({
        name: 'index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
}
//头部
.tops {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 40px;
  text-indent: 20px;
  .xiangyou {
    font-size: 20px;
    cursor: pointer;
  }
}

//一列
.column {
  width: 100%;
  height: 100px;
  padding: 30px;
  box-sizing: border-box;

  //top
  .column_tops {
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    //添加
    .Pushs {
      width: 100px;
      height: 30px;
      border-radius: 2px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      border: 1px solid #ddd;
    }
    .solid {
      width: 100%;
      height: 1px;
      background: #ddd;
      margin-bottom: 40px;
    }
    //@ss
    .items {
      width: 300px;
    }
  }
}

.bottom_list {
  width: 950px;
  text-align: center;
}
</style>
